<template>
<div >

    <div class="course">
      <i class="el-icon-food" style="color: #ffcc00;font-size: 20px"></i>
      <span style="font-size: 20px;cursor:pointer;">视频</span>
      <a style="color: darkgrey;font-size: 13px">video</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span style="color: darkgrey;font-size: 15px">随时健身</span>
      <el-divider direction="vertical"></el-divider>
      <span style="color: darkgrey;font-size: 15px">居家运动</span>
      <el-divider direction="vertical"></el-divider>
      <span style="color: darkgrey;font-size: 15px" >身材管理</span>
      <el-button style="float: right; padding: 5px 0;color: #ffcc00" type="text">+更多</el-button>
    </div>
  <el-divider></el-divider>
  <div   v-for="(item, index) in video" :key="o"   class="videos">
    <div class="player-container" STYLE="height:160px;width: 305px;">
      <VideoShow :src=item.videoaddr videoWidth=285px videoHegiht=150px ></VideoShow>
    </div>
    <p class="Text"><b>{{item.videotitle}}</b></p>
  </div>
  </div>

</template>

<script>
import VideoShow from "../video/VideoShow";

export default {
  name: "showvideo",
  components:{
    VideoShow:VideoShow
  },
  data(){
    return{
      url:"",
      video:[]

    }
  },
  created() {
    var url = '/video';
    this.$axios.get(url)
      .then( (res)=> {
        //document.write("data is coming", res.data.code);
        if (res.data.code === 200) {
          for(var i=0;i<4;i++) {
            let row = {}; // 定义一个当前添加数据的行
            row.id=res.data.data[i].id;
            row.userid=res.data.data[i].userid;
            row.videotitle=res.data.data[i].videotitle;
            row.videoaddr=res.data.data[i].videoaddr;
            row.audit=res.data.data[i].audit;
            row.brief=res.data.data[i].brief;
            row.createtime=res.data.data[i].createtime;
            this.video.push(row);

          }
          sessionStorage.setItem('video',JSON.stringify(this.video));

        }
        else {
          this.$message({message: res.data.msg, type: 'error'})
        }
      }).catch(function (error) {
      console.log(error);
    } );
  }

}
</script>

<style scoped>
.videos{
  height: 180px;
  width: 315px;
  /*border-style: solid;*/
  float: left;
  margin-right: 5px;
  margin-left: 10px;
  margin-bottom: 20px;
  text-align: center;
  background-color: rgb(255,255,255);
}
p.Text {
  /* 设置固定的宽度 */
  /*width: 400px;*/
  font-size:17px ;
  /* 裁剪多余的 */
  overflow: hidden;
  /* 多余的以省略号出现 */
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制再一个块元素再文本显示的行数 */
  -webkit-line-clamp: 1;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
span:hover {  color : red ; }
</style>
